<template>
  <div class="process-accordion">
    <h2 class="text-blue-dark">{{ data?.title }}</h2>
    <ul class="process-list my-6">
      <li
        v-for="(item, idx) in data?.processes"
        :key="item.id"
        class="process-item"
        :class="[
          { 'is-active': idx == activeIdx },
          { 'is-active-past': idx < activeIdx },
        ]"
        @click="setActiveIdx(idx)"
      >
        <div class="item-date tx-body-p">
          {{ item.date }}
        </div>
        <div class="item-line">
          <div class="item-num" :ref="(el: HTMLElement) => { if (el) numRefs.push(el as HTMLElement) }">
            {{ idx + 1 }}
          </div>
        </div>

        <div
          class="item-collapse"
          :class="{ 'is-open': idx == activeIdx }"
        >
          <div class="item-collapse__header flex-between">
            <h6 class="collapse__header__title">
              {{ item.title }}
            </h6>
            <div class="collapse__header__btn"></div>
          </div>
          <div class="item-collapse__body" :ref="(el: HTMLElement) => { if (el) bodyRefs.push(el as HTMLElement) }">
            <div class="item-desc" v-html="item.desc"></div>
            <div class="item__link mt-1">
              <div class="link-list__container">
                <link-list :list="item.linkList" />
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div>
      <btn-list :list="data?.btnList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue'
import btnList from '@/components/BtnList/btnList.vue'
import linkList from '@/components/LinkLIst/linkList.vue'

// 定义组件名称
defineOptions({
  name: 'ProcessAccordion'
})
const props = defineProps({
  data: Object,
  activeIdx: Number
})

// 定义 emits
const emit = defineEmits<{
  updateIdx: [value: number]
}>()

watch(() => props.data, () => {
  props.data?.processes?.forEach((v: any) => {
    v.linkList?.forEach((link: any) => {
      link.isLight = false
    })
  })
})

// 响应式数据
const vsWidth = ref(typeof window === 'undefined' ? 1024 : window.innerWidth)
const numRefs = ref<HTMLElement[]>([])
const bodyRefs = ref<HTMLElement[]>([])

const activeIdx = computed({
  get() {
    return props.activeIdx ?? NaN
  },
  set(newValue: number) {
    emit('updateIdx', newValue)
  }
})

// 方法
const updateViewportSize = () => {
  vsWidth.value = (typeof window === 'undefined' ? 1024 : window.innerWidth)
}

const setMaxHeight = () => {
  const bodies = bodyRefs.value
  bodies.forEach((v: HTMLElement) => {
    v.style.setProperty('--max-height', `${v.scrollHeight}px`)
  })
}

const setActiveIdx = (idx: number) => {
  if (activeIdx.value === idx) {
    activeIdx.value = NaN
  } else {
    activeIdx.value = idx
  }
}

// 监听器
watch(vsWidth, () => {
  setMaxHeight()
})

// 生命周期钩子
onMounted(() => {
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', updateViewportSize)
  }
  updateViewportSize()

  // 清空 refs 数组
  numRefs.value = []
  bodyRefs.value = []

  nextTick(() => {
    setMaxHeight()
  })
})

onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', updateViewportSize)
  }
})
</script>

<style lang="scss" scoped>
.text-blue-dark {
  --bs-text-opacity: 1;
  color: rgba(0,50,160,var(--bs-text-opacity))!important;
}
.my-6 {
  margin-top: 24px!important;
  margin-bottom: 24px!important
}

.tx-body-p {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.75;  
}

@media (max-width: 1023.98px) {
  .tx-body-p {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.mt-1 {
  margin-top: 4px!important
}
.process-accordion {
  .process-list {
    .process-item {
      display: flex;
      cursor: pointer;

      &:not(:last-child) {
        .item-collapse {
          padding-bottom: 14px;
        }

        .item-line {
          &::after,
          &::before {
            content: '';
            position: absolute;
            z-index: -1;
            width: 1px;
            left: 50%;
            top: 4px;
            transform: translateX(-50%);
          }

          &::before {
            height: 100%;
            background-color: #adb5bd;
          }

          &::after {
            height: 0;
            background-color: #0032a0;
            transition: height 0.3s ease-in-out;
          }
        }
      }

      .item-date,
      .item-line {
        flex-shrink: 0;
      }

      .item-date,
      .item-collapse > .item-collapse__header > .collapse__header__title {
        color: #0032a0;
        transition: color 0.3s ease-in-out;
      }

      .item-date {
        min-width: 42px;
      }

      .item-line {
        margin-left: 7px;
        margin-right: 18px;
        position: relative;
        z-index: 1;

        .item-num {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #0032a0;
          color: #f8f9fa;
          font-size: 9.33px;
          line-height: 16px;
          text-align: center;
          transition: background-color 0.3s ease-in-out;
          transform: translateY(4px);
        }
      }

      .item-collapse {
        flex-grow: 1;

        .item-desc {
          font-size: 16px;
          line-height: 1.5;
        }

        .item-desc,
        .item-desc :deep(*) {
          color: #64788f;

          strong {
            font-weight: 500;
            color: #0032a0;
            color: var(--text-color--primary, #0032a0);
          }
        }

        &__body {
          overflow: hidden;
          max-height: 0;
          transition: max-height 0.3s ease-in;
        }

        &.is-open {
          .item-collapse__body {
            max-height: var(--max-height);
          }
        }

        .collapse__header {
          &__btn {
            position: relative;
            width: 1.2em;
            height: 1.2em;
            margin-left: 22px;
            cursor: pointer;

            &::before,
            &::after {
              content: '';
              position: absolute;
              left: 50%;
              top: 50%;
              border-radius: 1px;
              background-color: #0032a0;
              transition: transform 0.3s;
            }

            &::before {
              width: 10px;
              height: 2px;
              transform: translate(-50%, -50%);
            }

            &::after {
              width: 2px;
              height: 10px;
              transform: translate(-50%, -50%);
            }
          }
        }
      }

      &.is-active {
        .item-date,
        .item-collapse > .item-collapse__header > .collapse__header__title {
          color: red;
        }

        .item-line {
          .item-num {
            background-color: red;
          }
        }

        .item-collapse {
          .collapse__header {
            &__btn {
              &::after {
                transform: translate(-50%, -50%) rotateZ(90deg);
              }
            }
          }
        }
      }
    }
  }

  .link-list__container {
    display: flex;
    align-items: center;
  }

  .btn-list__row {
    flex-direction: row;
  }
}
</style>